<template>
  <el-dialog :width="props.width" :title="props.title">
    <div class="theme">
      <h3>主题颜色</h3>
      <template v-for="(background, index) in allBackgroundColor" :key="index">
        <div
          :style="'background-color:' + background"
          @click="changeTheme('backgroundColor', background)"
        ></div>
      </template>
    </div>
    <div class="theme">
      <h3>字体颜色</h3>
      <template v-for="(text, index) in allTextColor" :key="index">
        <div
          :style="'background-color:' + text"
          @click="changeTheme('textColor', text)"
        ></div>
      </template>
    </div>
    <template #footer>
      <div style="float: left">
        <el-button
          type="primary"
          @click="changeTheme('backgroundColor', '#304156')"
          >默认主题</el-button
        >
      </div>
      <el-button @click="close()">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { theme } from "@/components/dialog/theme/theme";
import { inject, ref } from "vue";
export interface dialogProps {
  width?: string;
  title?: string;
}
const props = withDefaults(defineProps<dialogProps>(), {
  width: "30%",
  title: "主题定制",
});

const emit = defineEmits<{
  (e: "close"): void;
}>();

// 引入所有主题,引入设置主题方法
const { allBackgroundColor, allTextColor, setTheme } = theme();
const currentTheme = ref(inject("currentTheme"));

const changeTheme = (type: string, color: string) => {
  setTheme(currentTheme, type, color);
};
// 关闭页面
const close = () => {
  emit("close");
};
</script>

<style scoped>
.theme > div {
  width: 20px;
  height: 20px;
  display: inline-block;
  border: 1px solid black;
  margin-left: 60px;
}
</style>
